<template>
    <div class="container">
        <el-form inline size="small" @submit.native.prevent>
            <el-form-item label="报表模板名称">
              <el-input v-model="listPram.queryKeyWords" placeholder="请输入报表模板名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="缴费通页面">
                <el-select v-model="listPram.formId" placeholder="请选择缴费通页面"  >
                    <el-option v-for="item in editList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-button
                :disabled="sosobtn"
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="reset"
                >重置</el-button
              >
          </el-form>
           <el-button size="mini" type="primary" @click="handlerTemplateData()" v-if="rolesId===1" icon="el-icon-plus">新增</el-button>
          <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
              align="center"
              type="index"
              label="序号"
              width="60"
            ></el-table-column>
      <el-table-column
        prop="name"
        label="模板名称"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="formName"
        align="center"
        label="表单页面：">
      </el-table-column>
      <el-table-column
        prop="info"
        align="center"
        label="描述">
      </el-table-column>
      <!-- <el-table-column
        prop="type"
        align="center"
        label="功能类型">
         <template slot-scope="scope">
          <span v-if="scope.row.type == 1">缴费通</span>
            <span v-if="scope.row.type == 2">系统模板 </span>
         </template>
      </el-table-column> -->
      <el-table-column
        prop="isEnable"
        align="center"
        label="是否开启">
         <template slot-scope="scope">
            <span>{{ scope.row.isEnable == 0 ? '开启' : '关闭' }}</span>
         </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        align="center"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        width="180"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text"  @click="handleTemplate(scope.row)" v-if="rolesId===1">编辑</el-button>
            <!-- <el-button v-if="rolesId===1" size="mini" slot="reference" type="text" style="margin-left: 20px;" @click="handleDelete(scope.row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="listPram.size"
            :current-page.sync="listPram.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
        <el-dialog
            :visible.sync="templateVisible"
            :title="dialogForm.id?'编辑模板':'创建模板'"
            destroy-on-close
            :close-on-click-modal="false"
            width="500px"
            @close="dialogClose"
          >
            <div>
                <el-form :rules="dialogRules" ref="refDialogForm"  label-width="120px" :model="dialogForm" >
                    <el-form-item label="报表模板名称:" prop="name">
                       <el-input v-model="dialogForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="表单页面：" prop="formId">
                        <el-select v-model="dialogForm.formId" placeholder="请选择" style="width: 340px;" @change="formChange">
                           <el-option v-for="item in editList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="功能类型：" prop="type">
                        <el-select v-model="dialogForm.type" placeholder="请选择" style="width: 340px;" >
                           <el-option  label="缴费通" :value="1"></el-option>
                           <el-option  label="系统模板" :value="2"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="描述：" prop="info">
                       <el-input v-model="dialogForm.info" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="是否开启：" v-if="dialogForm.id">
                        <el-switch
                            v-model="dialogForm.isEnable"
                            active-text="开启"
                            :active-value="0"
                            :inactive-value="1"
                            inactive-text="关闭">
                          </el-switch>
                    </el-form-item>
        
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="templateVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTemplateVisible">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="cardDialog"
            destroy-on-close
            :close-on-click-modal="false"
            @close="dialogClose"
            width="440px"
          >
          <div class="dlg-center">
            <img src="../../../assets/img/taika.png" alt="">
            <div id="qrcode1"></div>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import '../../../assets/js/jquery-qrcode';
import { templateList , formConfigList , templateAdd , templateEdit  } from '@/api/api'
import { Dialog } from 'element-ui'
export default {
    data(){
        return{
            listPram:{
                size:10,
                page:1
            },
            editList:[],
            dialogRules:{
                name:[{required: true, message: '请输入', trigger: 'blur'}],
                formId:[{required: true, message: '请选择', trigger: 'change'}],
                info:[{required: true, message: '请输入', trigger: 'blur'}],
                merchantNo:[{required: true, message: '请输入', trigger: 'blur'}],
                type:[{required: true, message: '请选择', trigger: 'change'}]
            },
            tableData:[],
            total:0, 
            loading:false,
            templateVisible:false,
            dialogForm:{},
            rolesId:0,
            cardDialog:false
        }
    },
    mounted(){
        this.initList()
        this.initConfigList()
    },
    methods:{
       async  initList(){
        this.loading = true
          const res = await templateList(this.listPram)
          this.tableData = res.data
          this.total = res.pageInfo.recordCount
          this.loading = false
        },
        async initConfigList(){
                const userInfo = sessionStorage.getItem('userInfo')
                this.rolesId = JSON.parse(userInfo).rolesId
                const res = await formConfigList({size:9999,page:1})
                this.editList = res.data
        },
    
        renderheader(h, { column, $index }) {
          return h("span", {}, [
          h("span", {}, column.label.split("?")[0]),
          h("br"),
          h("span", {}, column.label.split("?")[1]),
           ]);
        },
        async handleTemplate(row){
             this.templateVisible  = true
             this.initConfigList()
             this.dialogForm = JSON.parse(JSON.stringify(row))
        },
        formChange(id){
         const data =  this.editList.find(item=>item.id == id)
         this.dialogForm.formName = data.name
        },
        reset(){
             this.listPram = {
                size:10,
                page:1
             }
             this.initList()
        },
        handleCurrentChange(val) {
            this.listPram.page = val;
            this.initList()
        },
        dialogClose(){
           this.dialogForm = {}
        },
         addTemplateVisible(){
            this.$refs.refDialogForm.validate(valid => {
            if(valid){
              this.dialogForm.type = 1
                if(this.dialogForm.id){ //编辑
                    templateEdit(this.dialogForm).then(res=>{
                        if(res.code == 200){
                        this.templateVisible = false
                        this.$message.success(`编辑成功！`)
                        this.initList()
                       }
                    })
                }else{ //新增
                    templateAdd(this.dialogForm).then(res=>{
                if(res.code == 200){
                   this.templateVisible = false
                   this.$message.success(`新增成功！`)
                   this.initList()
                 }
              })
                }
            }
          })
        },
    //    async handleDelete(id){
    //  const then =  await this.$confirm(`是否确定删除该模板？`, "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning"
    //   })
    //   if(then == 'confirm'){
    //     const res = await templateDelete(id)
    //        if(res.code == 200){
    //           this.$message.success(`删除成功！`)
    //           this.initList()
    //           this.templateVisible = false
    //        }
    //   }
    //     },
        handlerTemplateData(){
            this.initConfigList()
            this.templateVisible = true
        },
        sizechange(val) {
            this.listPram.size = val;
            this.initList()
        },
    }
}
</script>

<style scoped lang="less">
.container{
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  overflow: hidden;
  overflow-y: auto;
}
.dlg-center{
  width: 400px;
  height: 550px;
  position: relative;
  img{
    width: 100%;
  }
  #qrcode1{
    position: absolute;
    top: 195px;
    left: 110px;
    z-index: 1;
  }
}
</style>